<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>发布招工信息</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        .container {
            max-width: 750px;
            margin: 0 auto;
            background-color: #fff;
        }
        .step-indicator {
            display: flex;
            justify-content: center;
            padding: 15px 0;
            background-color: #fff;
            border-bottom: 1px solid #eee;
        }
        .step {
            position: relative;
            padding: 0 20px;
            color: #999;
            font-size: 14px;
        }
        .step.active {
            color: #4f46e5;
            font-weight: 500;
        }
        .step:not(:last-child):after {
            content: "";
            position: absolute;
            right: -5px;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ccc' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
        }
        .form-group {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }
        .form-label {
            display: block;
            margin-bottom: 10px;
            font-weight: 500;
            color: #333;
        }
        .form-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            transition: border-color 0.2s;
        }
        .form-input:focus {
            border-color: #4f46e5;
            outline: none;
        }
        .radio-group {
            display: flex;
            gap: 15px;
        }
        .radio-option {
            display: flex;
            align-items: center;
        }
        .radio-option input {
            margin-right: 5px;
        }
        .select-wrapper {
            position: relative;
        }
        .select-wrapper:after {
            content: "";
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            pointer-events: none;
        }
        .form-select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 15px;
            appearance: none;
            background-color: #fff;
        }
        .salary-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .salary-type {
            flex: 0 0 80px;
        }
        .salary-range {
            flex: 1;
        }
        .action-bar {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            background-color: #fff;
            border-top: 1px solid #eee;
        }
        .btn {
            padding: 12px 25px;
            border-radius: 6px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-cancel {
            border: 1px solid #ddd;
            background-color: #fff;
            color: #666;
        }
        .btn-cancel:hover {
            background-color: #f5f5f5;
        }
        .btn-next {
            background-color: #4f46e5;
            color: #fff;
            border: none;
        }
        .btn-next:hover {
            background-color: #4338ca;
        }
        .char-count {
            font-size: 12px;
            color: #999;
            text-align: right;
            margin-top: 5px;
        }
        .textarea {
            min-height: 100px;
            resize: vertical;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 步骤指示器 -->
        <div class="step-indicator">
            <div class="step active">1. 填写信息</div>
            <div class="step">2. 上传资料</div>
            <div class="step">3. 确认发布</div>
        </div>

        <!-- 表单内容 -->
        <form>
            <!-- 职位标题 -->
            <div class="form-group">
                <label class="form-label">职位标题</label>
                <input type="text" class="form-input" placeholder="例如：急聘住家育儿嫂" maxlength="30">
                <div class="char-count">0/30</div>
            </div>

            <!-- 服务类型 -->
            <div class="form-group">
                <label class="form-label">服务类型</label>
                <div class="select-wrapper">
                    <select class="form-select">
                        <option value="" disabled selected>请选择服务类型</option>
                        <option value="保洁">保洁</option>
                        <option value="月嫂">月嫂</option>
                        <option value="育儿嫂">育儿嫂</option>
                        <option value="护工">护工</option>
                        <option value="维修">维修</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
            </div>

            <!-- 工作性质 -->
            <div class="form-group">
                <label class="form-label">工作性质</label>
                <div class="radio-group">
                    <label class="radio-option">
                        <input type="radio" name="job-type" value="全职" checked> 全职
                    </label>
                    <label class="radio-option">
                        <input type="radio" name="job-type" value="兼职"> 兼职
                    </label>
                    <label class="radio-option">
                        <input type="radio" name="job-type" value="临时"> 临时
                    </label>
                </div>
            </div>

            <!-- 薪资待遇 -->
            <div class="form-group">
                <label class="form-label">薪资待遇</label>
                <div class="salary-group">
                    <div class="salary-type">
                        <div class="select-wrapper">
                            <select class="form-select">
                                <option value="月薪">月薪</option>
                                <option value="时薪">时薪</option>
                                <option value="日薪">日薪</option>
                            </select>
                        </div>
                    </div>
                    <div class="salary-range">
                        <input type="text" class="form-input" placeholder="例如：5000-8000">
                    </div>
                </div>
            </div>

            <!-- 工作地点 -->
            <div class="form-group">
                <label class="form-label">工作地点</label>
                <div class="select-wrapper" style="margin-bottom: 10px;">
                    <select class="form-select">
                        <option value="" disabled selected>请选择城市</option>
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广州">广州</option>
                        <option value="深圳">深圳</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
                <input type="text" class="form-input" placeholder="区域/街道（抢单成功后显示详细地址）">
            </div>

            <!-- 工作时间 -->
            <div class="form-group">
                <label class="form-label">工作时间</label>
                <input type="date" class="form-input" style="margin-bottom: 10px;">
                <input type="text" class="form-input" placeholder="例如：早9点-晚6点" style="margin-bottom: 10px;">
                <div class="select-wrapper">
                    <select class="form-select">
                        <option value="" disabled selected>每周工作天数</option>
                        <option value="1天">1天</option>
                        <option value="2天">2天</option>
                        <option value="3天">3天</option>
                        <option value="4天">4天</option>
                        <option value="5天">5天</option>
                        <option value="6天">6天</option>
                        <option value="7天">7天</option>
                    </select>
                </div>
            </div>

            <!-- 详细描述 -->
            <div class="form-group">
                <label class="form-label">详细描述</label>
                <textarea class="form-input textarea" placeholder="工作内容、技能要求、福利待遇等" maxlength="500"></textarea>
                <div class="char-count">0/500</div>
            </div>
        </form>

        <!-- 底部操作栏 -->
        <div class="action-bar">
            <button type="button" class="btn btn-cancel">取消</button>
            <button type="button" class="btn btn-next">下一步</button>
        </div>
    </div>

    <script>
        // 字符计数功能
        document.addEventListener('DOMContentLoaded', function() {
            // 职位标题计数
            const titleInput = document.querySelector('input[placeholder="例如：急聘住家育儿嫂"]');
            const titleCount = document.querySelectorAll('.char-count')[0];
            
            titleInput.addEventListener('input', function() {
                titleCount.textContent = `${this.value.length}/30`;
            });

            // 详细描述计数
            const descTextarea = document.querySelector('textarea');
            const descCount = document.querySelectorAll('.char-count')[1];
            
            descTextarea.addEventListener('input', function() {
                descCount.textContent = `${this.value.length}/500`;
            });

            // 下一步按钮点击事件
            const nextBtn = document.querySelector('.btn-next');
            nextBtn.addEventListener('click', function() {
                // 这里可以添加表单验证逻辑
                window.location.href = 'job-publish-step2.html';
            });

            // 取消按钮点击事件
            const cancelBtn = document.querySelector('.btn-cancel');
            cancelBtn.addEventListener('click', function() {
                if(confirm('确定要取消发布吗？所有填写的信息将丢失')) {
                    window.location.href = 'employer-job-publish.html';
                }
            });
        });
    </script>
</body>
</html>